<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
           <li v-for="(item, index) in car">
               商品名：{{item.name}}----价格：{{item.price}}---数量：{{item.num}}
               <button @click="item.num++">+1</button>
               <button @click="item.num--">-1</button>
           </li>
           <li><strong>总价：</strong>{{getsum}}</li>
           <li v-html="message"></li>
        </ul>
       </div>
</body>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
                car:[
                    {name:'苹果14', price:7999, num:1},
                    {name:'五常大米', price:5.2, num:1},
                ],
                message:""
            },
        methods: {
        //当方法中使用的数据发生改变，会自动调用方法
        //     getsum(){
        //         let sum=0;
        //         this.car.forEach(element => {
        //           sum+=element.price*element.num;   
        //         });
        //         return sum;
        //     },
        },
          //计算属性：调用不用加括号
        computed:{
            getsum(){
                let sum=0;
                this.car.forEach(element => {
                  sum+=element.price*element.num;   
                });
                return sum;
            }
        },
        //专门用于侦听数据的变化的，当数据变化时会自动调用
        watch:{
            car:{
                deep:true,
                handler(newvalue,oldvalue){
                 this.message="";
                 this.car.forEach(e=> {
                    if(e.num<=0){
                        // message+=e.name;
                        // message+='的数量已经为0<br/>'
                        this.message+=`${e.name}的数量已经为0<br/>`
                    }
                });
                }
            },
            message(newvalue,oldvalue){
                console.info(newvalue,oldvalue)
            }
        }
    })
</script>
</html>